<template>
  <div class="original-record">
    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="考勤组">
          <el-select v-model="filterForm.groupId" placeholder="请选择考勤组">
            <el-option
              v-for="item in attendanceGroups"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="人员范围">
          <el-select v-model="filterForm.employeeType" placeholder="请选择人员范围">
            <el-option label="全部人员" value="all" />
            <el-option label="在职人员" value="active" />
            <el-option label="离职人员" value="inactive" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="department" label="组织架构" width="150" />
        <el-table-column prop="employeeId" label="工号" width="100" />
        <el-table-column prop="groupName" label="考勤组" width="120" />
        <el-table-column prop="date" label="日期" width="100" />
        <el-table-column label="班次" width="100">
          <template slot-scope="scope">
            {{ scope.row.shiftName || '默认班次' }}
          </template>
        </el-table-column>
        <el-table-column prop="clockInTime" label="上班打卡" width="180">
          <template slot-scope="scope">
            <span :class="getClockInClass(scope.row.clockInStatus)">
              {{ scope.row.clockInTime }}
              <el-tag
                v-if="scope.row.clockInStatus !== 'normal'"
                :type="getStatusType(scope.row.clockInStatus)"
                size="mini"
              >
                {{ getStatusText(scope.row.clockInStatus) }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="clockOutTime" label="下班打卡" width="180">
          <template slot-scope="scope">
            <span :class="getClockInClass(scope.row.clockOutStatus)">
              {{ scope.row.clockOutTime }}
              <el-tag
                v-if="scope.row.clockOutStatus !== 'normal'"
                :type="getStatusType(scope.row.clockOutStatus)"
                size="mini"
              >
                {{ getStatusText(scope.row.clockOutStatus) }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="workHours" label="工时" width="80" align="center" />
        <el-table-column prop="status" label="考勤结果" width="100">
          <template slot-scope="scope">
            <el-tag :type="getAttendanceStatusType(scope.row.status)">
              {{ getAttendanceStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleViewDetail(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OriginalRecord',
  data() {
    return {
      filterForm: {
        dateRange: [],
        groupId: '',
        employeeType: 'all'
      },
      attendanceGroups: [
        { id: 1, name: '研发部门' },
        { id: 2, name: '市场部门' },
        { id: 3, name: '行政部门' }
      ],
      loading: false,
      tableData: [
        {
          name: '张三',
          department: '技术部/研发组',
          employeeId: '10001',
          groupName: '研发部门',
          date: '2024-03-01',
          shiftName: '早班',
          clockInTime: '09:00:00',
          clockInStatus: 'normal',
          clockOutTime: '18:00:00',
          clockOutStatus: 'normal',
          workHours: '8',
          status: 'normal'
        }
        // 更多数据...
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    handleSearch() {
      // TODO: 实现查询逻辑
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    handleReset() {
      this.filterForm = {
        dateRange: [],
        groupId: '',
        employeeType: 'all'
      }
      this.handleSearch()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.handleSearch()
    },
    handleViewDetail(row) {
      // TODO: 实现查看详情逻辑
      console.log('查看详情:', row)
    },
    getClockInClass(status) {
      return {
        'clock-time': true,
        'clock-late': status === 'late',
        'clock-early': status === 'early'
      }
    },
    getStatusType(status) {
      const types = {
        normal: '',
        late: 'warning',
        early: 'danger',
        missing: 'info'
      }
      return types[status] || ''
    },
    getStatusText(status) {
      const texts = {
        normal: '正常',
        late: '迟到',
        early: '早退',
        missing: '未打卡'
      }
      return texts[status] || ''
    },
    getAttendanceStatusType(status) {
      const types = {
        normal: 'success',
        abnormal: 'warning',
        absent: 'danger'
      }
      return types[status] || ''
    },
    getAttendanceStatusText(status) {
      const texts = {
        normal: '正常',
        abnormal: '异常',
        absent: '旷工'
      }
      return texts[status] || ''
    }
  }
}
</script>

<style scoped>
.original-record {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.pagination-section {
  margin-top: 20px;
  text-align: right;
}

.clock-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.clock-late {
  color: #e6a23c;
}

.clock-early {
  color: #f56c6c;
}
</style>